import React, { PureComponent } from 'react';
class ChildC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { num:5 }
    // console.log("挂载:01 constructor")
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log("挂载:02 getDerivedStateFromProps")
    // console.log("更新:01 getDerivedStateFromProps")
    return {}
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   // console.log("更新:02  shouldComponentUpdate")
  //   // return true
  //   // 如果发现props相同就不更新返回false否则返回true
  //   if(this.props.value===nextProps.value){
  //     return false;
  //   }else{
  //     return true;
  //   }
  // }
 
  render() { 
    var num = this.state.num;
    // console.log("挂载:03 render")
    // console.log("更新:03 render")
    console.log("render")
    return ( <div>
    <h3>组件的生命周期ChildC</h3>
    <p>子组件接收value{this.props.value}</p>
    <button onClick={()=>this.setState({num:num+1})}>{num}</button>
    </div> );
  }
  componentDidMount() {
    // console.log("挂载:04 componentDidMount")
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // console.log("更新:04 getSnapshotBeforeUpdate")
    // 更新前获取快照,返回的的值下个cdu的第三个参数
    return {name:"mumu",age:19}
  }
  componentDidUpdate(prevProps, prevState,snap) {
    // console.log("更新:05 componentDidUpdate",snap)
  }
  componentWillUnmount(){
    // console.log("卸载：01 componentWilUnmount")
  }
}
 
export default ChildC;

// react的生命周期三个阶段
// 卸载阶段
// 01 componetWillUnmount组件将要卸载
// 更新阶段
// 01 static getDerivedStateFromProps
// 02 sholdComponentUpdate 返回true执行渲染，返回false不渲染（优化）
// 03 render 渲染
// 04 getSnapshotBeforeUpdate 更新前获取快照
// 05 componentDidUpdate 组件已经更新
// 挂载阶段
// 01 构造函数
// 02 static getDerivedStateFromProps 
//    props，state更新会执行
// 03 render  函数
// 04 componentDidMount 组件已经挂载
//    事件监听，dom操作，ajax，定时器